<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地应用-notepad</title>
    <style type="text/css">
        /*输入框--*/
        body {
            background-color: rgb(244, 244, 244);
            text-align: center;
        }

        input {
            outline: none;
        }

        .header {
            font-family: "华文楷体,宋体";
            color: rgb(251, 114, 153);
            font-size: 30px;
            width: 500px;
            margin: 0 auto;
        }

        .new-todo {
            width: 496px;
            height: 50px;
            border: 1px solid #bbbfc4;
            border-radius: 5px 5px 0px 0px;
            font-size: 18px;
            line-height: 3;
            font-style: italic;
        }

        .new-todo:focus {
            box-shadow: 0 0 15px #03a9f4;
        }

        .new-todo::placeholder {
            font-size: 18px;
            line-height: 3;
            font-style: italic;
        }

        /*列表区域*/
        .main {
            width: 500px;
            margin: 0 auto;
            background-color: white;
        }

        .todo-list {
            padding: 0;
            margin: 0;
        }

        .todo {
            list-style: none;
            width: 500px;
            height: 50px;
        }

        .view {
            height: 50px;
            float: left;
            color: #333;
            font-family: 华文楷体;
            display: flex;
            align-items: center;
            padding: 0px 0px 0px 20px;
        }

        .view label {
            margin: 0px 15px;
        }

        .destory {
            border: none;
            font-size: 30px;
            color: red;
            position: relative;
            left: 300px;
            background-color: transparent;
            display: none;
        }

        .footer {
            width: 500px;
            height: 40px;
            margin: 0 auto;
            position: relative;
            left: 1px;
            background-color: white;
            border-radius: 0px 0px 5px 5px;
            color: #333;
            font-family: 华文楷体;
        }

        .todo, .footer {
            border-left: 1px solid #bbbfc4;
            border-right: 1px solid #bbbfc4;
            border-bottom: 1px solid #bbbfc4;
        }

        .todo-count {
            height: 40px;
            float: left;
            display: flex;
            align-items: center;
            margin: 0px 0px 0px 20px;
        }

        .clear-complated {
            height: 40px;
            float: right;
            border: none;
            background-color: transparent;
            display: flex;
            align-items: center;
            margin: 0px 20px 0px 0px;
        }
    </style>
</head>
<body>
<!--主体区域-->
<section id="todoapp">
    <!--输入框-->
    <header class="header">
        <h1>Soul漂流记事本</h1>
        <input v-model="inputValue" type="text" autofocus="autofocus" autocomplete="off"
               placeholder="请输入心情" class="new-todo" @keyup.enter="add">
    </header>
    <!--列表区域-->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list">
                <div class="view">
                    <span class="index">{{index+1}}.</span>
                    <label>{{item}}</label>
                    <button @click="remove(index)" class="destory">×</button>
                </div>
            </li>
        </ul>
    </section>
    <!--清空和统计-->
    <footer class="footer">
        <span class="todo-count" v-if="list.length!=0">
            <strong>{{list.length}}</strong>
            items left
        </span>
        <button @click="clear" class="clear-complated" v-show="list.length!=0">
            Clear
        </button>
    </footer>
</section>
<br>
<!--底部-->
<footer class="info">
    <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI4MTMwMDg4MA==&scene=124&#wechat_redirect">
        <img src="https://gitee.com/joeljhou/Mapdepot/raw/master/image/20200917124307.jpg" alt="">
    </a>
</footer>

<!--jQuery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: "#todoapp",
        data: {
            list: ["写代码", "睡觉觉", "玩游戏"],
            inputValue: "好好学习，天天向上"
        },
        methods: {
            add: function () {
                if (this.inputValue != "") {
                    this.list.push(this.inputValue);
                    this.inputValue = "";
                } else {
                    alert("请输入内容");
                }
            },
            remove: function (index) {
                this.list.splice(index, 1);
            },
            clear: function () {
                this.list = [];
            }
        }
    })

    $(".todo").on("mouseover mouseout", function (event) {
        if (event.type == "mouseover") {
            console.log("鼠标悬浮")
            $(this).find("button").css("display", "block");
        } else if (event.type == "mouseout") {
            console.log("鼠标离开")
            $(this).find("button").css("display", "none");
        }
    })
</script>
</body>
</html>
